JavaScript buttons

Fireworks makes it easy to create interactive buttons without writing a line of JavaScript code.

 
Create one button

You'll convert the rectangle into a button and then use the Button Editor to complete the button.

1	With the rectangle still selected, choose Insert > Convert to Symbol. In Fireworks, buttons are a special type of object called symbols that are stored in the document's library. For more information on using symbols and the Library panel, see Symbols and instances.
2	Type Button in the Name text box, select the Button option, and click OK.
	Notice that the rectangle appears now to have a a light green fill and a small arrow in the lower left corner. The fill hasn't changed. Rather, the light green represents a slice object. The arrow indicates that the rectangle is an instance of the button. The original artwork for the button is stored in the document's library.
3	Double-click the button to open the Button Editor, or choose Modify > Symbol > Edit Symbol. With the Button Editor, you create the graphics you want for each state of the button. The first change you'll make is to add text for the button's label.
4	Select the Text tool and click near the center of the rectangle in the Button Editor.
5	Choose a font from the font pop-up menu in the Text Editor dialog box, enter a point size, select a color from the color pop-up menu, and click the center alignment button (we used Arial, 14 point, boldface, center aligned).
6	Type our story in the large text box at the bottom of the dialog box and click OK.
	Now you'll use the Align commands to center the text within the rectangle.
7	With the Pointer tool, select the rectangle and then hold down Shift and click (Shift-click) the text.
8	Choose Modify > Align > Center Vertical and then choose Modify > Align > Center Horizontal.
	Fireworks moved the text to align it within the rectangle and didn't move the rectangle. The Align commands maintain the position of the first selected object, to which they align subsequently selected objects.
9	Click the Over tab in the Button Editor and click the Copy Up Graphic button. The image in the Over tab is what appears when the pointer passes over the button in the completed Web page.
	To make this image distinct from the Up state, you'll change the fill color by sampling a color from the image.
10	Use the Pointer tool to select the rectangle. Click the fill color well in the Toolbox, select the dropper, and click the tan rectangle behind the welcome message. The dropper lets you sample any color on the screen.
	Each button you create should link to an Internet address, such as a URL.
11	Click the Active Area tab in the Button Editor and then click Link Wizard in the lower right corner.
12	Click the Link tab. Enter a URL in the text box at the top of the dialog box. Use a valid URL (such as http://www.macromedia.com) so that you can test the button in a browser.
13	Click OK.
14	Close the Button Editor.

 
Duplicate the button

Fireworks makes it easy to create a number of buttons that look similar but have different links and text.

1	Hold down Alt (Windows) or Option (Macintosh) and drag the button down the page. By Alt/Option-dragging you move a copy of a selection.
2	If the Object inspector is not visible, choose Window > Object.
3	In the Button Text text box, type gifts and press Enter (Windows) or Return (Macintosh).
	A message box appears asking if you want to edit the active instance of the button, or all instances of the button. Because you duplicated the Our Story button, you have two instances of the same button. When you edit a button, Fireworks updates all the instances. In this case, you want to have two distinct buttons, so you'll choose to edit the current button.
4	Click Current.
5	Click the Link Wizard button in the Object inspector.
6	Click the Link tab and change the URL. Use a valid URL so that you can test the button when you preview the page in a browser.
7	Click OK. Notice that the text on the button has been updated.